
<div class="row">
  <div class="col-xs-8">
    <h1>Genre <span class="text-muted text-xs">({{vm.genres.length}} items)</span></h1>
    <p>Here you can manage the genres for Videos / TvShows.</p>
    <p>Usually, Genre are automatically added alongside TMDb-videos & shows. But if TMDb isn't enabled or  you want to add your own custom Genres, you can do so here.</p>
  </div>
  <div class="col-xs-4 text-right">
    <br>
    <button class="btn btn-primary" ng-click="vm.addGenre()">Add new Genre</button>
  </div>
</div>


<div>
  <table class="table table-striped table-reports">
    <thead>
    <tr>
      <th>ID</th>
      <th>External-ID</th>
      <th>Name</th>
      <th></th>
    </tr>
    </thead>
    <tr ng-repeat="genre in vm.genres | orderBy:'-id' ">
      <td>
        {{genre.id}}
      </td>
      <td>
        <span ng-bind="genre.apiId" ng-if="genre.apiId"></span>
        <span ng-if="!genre.apiId" class="text-muted">CUSTOM</span>
      </td>
      <td>
        {{genre.name}}
      </td>

      <td>
        <button ng-if="!genre.apiId" class="btn btn-xs btn-danger" ng-click="vm.deleteGenre(genre.id)">Delete</button>
      </td>
    </tr>
  </table>


</div>
